<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/layer/layer.js"></script>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/index2.css" />
    <script src="./js/vue.js"></script>
  </head>

  <body>
    <div class="nav">
      <h1>热门活动</h1>
      <h2>品牌分类</h2>
      <div>
        <a href="./cart"><img src="./images/gwc.png" alt="" /></a>
      </div>
      <div>
        <img src="./images/dd.png" alt="" />
      </div>
      <div>
        <img src="./images/sc.png" alt="" />
      </div>
      <div>
        <img src="./images/web.png" alt="" />
      </div>
      <div class="toTop">
        <span>^</span>
        <p>TOP</p>
      </div>
    </div>
    <header>
      <div class="h-nav main">
        <span><a href="./login">欢迎登录名鞋网</a></span>
        <ul>
          <li>
            <a href="./register" style="text-decoration: none; color: red"
              >免费注册</a
            >
          </li>
          <li>我的名鞋库</li>
          <li>手机名鞋库</li>
          <li>收藏名鞋库</li>
          <li>400 116 2228</li>
          <li>工作日上班时间: 9:00-22:00. 非工作日上班时间: 10:00-22:00</li>
        </ul>
      </div>
    </header>
    <div class="m-header">
      <div class="m-nav main">
        <div><img src="./images/logo.png" alt="" /></div>
        <div>
          <span>专业精选</span>
          <span>足够喜欢</span>
        </div>
        <div class="box">
          <input type="text" placeholder="李宁" /><button>搜索</button>
          <h4>热搜:</h4>
          <ul>
            <li>跑步鞋</li>
            <li>休闲鞋</li>
            <li>篮球鞋</li>
            <li>男鞋</li>
            <li>女鞋</li>
          </ul>
        </div>
        <div>
          <a href="./cart" style="color: black; text-decoration: none"
            >购物车 0 件</a
          >
        </div>
      </div>
    </div>
    <div class="f-header">
      <div class="f-nav main">
        <div>
          <span
            >所有商品分类
            <div class="fl">
              <p>全部品牌</p>
              <p>运动鞋</p>
              <p>运动服</p>
              <p>运动配件</p>
            </div>
          </span>
          <ul>
            <li>首页</li>
            <li>男子专区</li>
            <li>女子专区</li>
            <li>运动配件</li>
          </ul>
        </div>
        <div>
          <ol>
            <li>营业执照</li>
            <li>七天无理由退换货</li>
            <li>正品授权</li>
            <li>满99包邮</li>
          </ol>
        </div>
      </div>
    </div>
    <div class="wz main">
      <span>你当前的位置:</span>
      <ul>
        <li>名鞋库</li>
        <li>>></li>
        <li>运动鞋子</li>
        <li>>></li>
        <li>休闲鞋</li>
        <li>>></li>
        <li>彪马</li>
        <li>>></li>
        <li>彪马鞋子</li>
        <li>>></li>
        <li>彪马</li>
        <li>37160203</li>
      </ul>
    </div>
    <div class="main container" style="height: 651px; width: 1200px">
      <div id="box">
        <div class="middle">
          <ul>
            <li class="tab-item active">
              <img src="./images/1_2.jpg" alt="" />
            </li>
            <li class="tab-item"><img src="./images/2_2.jpg" alt="" /></li>
            <li class="tab-item"><img src="./images/3_2.jpg" alt="" /></li>
            <li class="tab-item"><img src="./images/4_2.jpg" alt="" /></li>
            <li class="tab-item"><img src="./images/5_2.jpg" alt="" /></li>
          </ul>
        </div>
        <div class="small">
          <ul>
            <li class="main1 selected">
              <img src="./images/1_1.jpg" alt="" />
            </li>
            <li class="main1"><img src="./images/2_1.jpg" alt="" /></li>
            <li class="main1"><img src="./images/3_1.jpg" alt="" /></li>
            <li class="main1"><img src="./images/4_1.jpg" alt="" /></li>
            <li class="main1"><img src="./images/5_1.jpg" alt="" /></li>
          </ul>
        </div>
        <div class="fx">
          <span>分享到:</span>
          <img src="./images/log.png" alt="" />
        </div>
      </div>
      <div class="zs" v-for="(item,index) in list" ::key="item.gid">
        <div class="bx">
          <p>{{ item.gname }}</p>
          <span style="color: red">彪马</span><span>更多</span>
        </div>
        <div class="bx1">
          <div>
            <span>吊 牌 价:</span>
            <span style="text-decoration: line-through">￥599.00</span>
          </div>
          <div>
            <span>销 售 价:</span>
            <span style="color: red; font-size: 20px">￥{{ item.gprice }}</span>
            <span>(4.1折) 立省:</span>
            <span> ￥351.00</span>
          </div>
          <div>
            <span>好 评 度:</span>
            <span>☆☆☆☆☆ (已有0人评论)</span>
          </div>
          <div>
            <span>运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费:</span>
            <span>名鞋库会员满99包邮 (不包含货到付款)</span>
          </div>
        </div>
        <div class="bx2">
          <div class="cx">
            <span
              style="
                background-color: red;
                color: white;
                display: inline-block;
                width: 80px;
                text-align: center;
              "
              >促销信息</span
            ><span
              style="
                color: red;
                background-color: pink;
                width: 520px;
                display: inline-block;
                text-indent: 10px;
              "
              >99包邮</span
            >
          </div>
        </div>
        <div class="bx3">
          <div style="width: 600px; height: 40px">
            <span style="float: left; margin-top: 5px"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尺码:&nbsp;&nbsp;</span
            >
            <ul class="cm">
              <li>36</li>
              <li>37</li>
              <li>38</li>
              <li>39</li>
              <li>40</li>
              <li>41</li>
              <li>42</li>
              <li>42.5</li>
              <li>43</li>
              <li>44</li>
            </ul>
          </div>
          <div style="width: 600px; height: 40px">
            <span style="float: left; margin-top: 5px"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;颜色:&nbsp;&nbsp;</span
            >
            <img
              src="./images/img4.png"
              alt=""
              style="margin-left: 5px; width: 30px; height: 30px"
            />
          </div>
          <div>
            <span>购买数量:&nbsp;&nbsp;</span>
            <button>-</button>
            <input type="text" value="1" style="width: 20px" />
            <button>+</button>
            <button style="position: absolute; right: 2px; bottom: 10px">
              ＋收藏此商品
            </button>
          </div>
          <div class="cmhs">尺码换算</div>
        </div>
        <div class="bx4" style="height: 60px; width: 600px">
          <span>你将购买 1 件 深牛仔蓝+米白色</span>
          <button
            style="background-color: orange; color: white; border: none"
            class="add"
            :data-id="item.gid"
          >
            加入购物车
          </button>
          <button style="background-color: red; color: white; border: none">
            立即购买
          </button>
        </div>
        <div class="bx5">
          <span>名鞋库保障:</span>
          <ul>
            <li>正品认证</li>
            <li>自由退货</li>
            <li>全场满99免邮</li>
          </ul>
        </div>
        <div class="fot">
          <div class="main" style="background-color: #ccc; height: 40px">
            <span style="float: left; margin-top: 10px"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尺码&nbsp;&nbsp;</span
            >
            <ul class="fcm">
              <li>36</li>
              <li>37</li>
              <li>38</li>
              <li>39</li>
              <li>40</li>
              <li>41</li>
              <li>42</li>
              <li>42.5</li>
              <li>43</li>
              <li>44</li>
            </ul>
            <span style="margin-left: 300px">数量:&nbsp;&nbsp;</span>
            <button>-</button>
            <input type="text" value="1" style="width: 20px" />
            <button>+</button>
            <span>(库存1180)</span>
            <button
              style="
                background-color: orange;
                padding: 5px;
                color: white;
                border: none;
                width: 150px;
                margin-left: 20px;
                margin-top: 5px;
              "
              class="add"
              :data-id="item.gid"
            >
              加入购物车
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper main">
      <ul class="tab">
        <li class="active1">商品详情</li>
        <li>顾客评论(0)</li>
        <li>总销量(3)</li>
        <li>购买咨询(0)</li>
        <li>购物保障</li>
        <li>放心退换货</li>
        <li>常见问题</li>
      </ul>
      <div class="products">
        <div class="selected1">
          <a href="###"><img src="./images/img5.png" alt="" /></a>
        </div>
        <div>
          <a href="###"><img src="./images/img6.png" alt="" /></a>
        </div>
        <div>
          <a href="###"><img src="./images/img7.png" alt="" /></a>
        </div>
        <div>
          <a href="###"><img src="./images/img8.png" alt="" /></a>
        </div>
        <div>
          <a href="###"><img src="./images/img9.png" alt="" /></a>
        </div>
        <div>
          <a href="###"><img src="./images/img10.png" alt="" /></a>
        </div>
        <div>
          <a href="###"><img src="./images/img11.png" alt="" /></a>
        </div>
      </div>
    </div>

    <script>
      let vm = new Vue({
        el: ".container",
        async created() {
          let result = await $.ajax({
            url: "/api/getgoods",
            headers: {
              token: localStorage.getItem("token"),
            },
          });
          console.log(result);
          if (result.code == 403) {
            layer.msg(result.msg);
            setTimeout(() => {
              location = "/login";
            }, 2000);
          }
          this.list = result.data;
          console.log(this.list);
        },
        data: {
          list: {},
        },
      });
    </script>

    <script>
      $(function () {
        $(".container").on("click", ".add", async function () {
          let gid = $(this).data("id");
          let { data } = await $.ajax({
            headers: {
              token: localStorage.getItem("token"),
            },
            url: `/api/search/${gid}`,
          });
          let curGoodsInfo = data[0];
          console.log(curGoodsInfo);
          curGoodsInfo.gnumber = 1;
          curGoodsInfo.uid = JSON.parse(
            localStorage.getItem("userinfo") || "{}"
          ).id;
          console.log(curGoodsInfo);
          $.ajax({
            headers: {
              token: localStorage.getItem("token"),
            },
            url: "/api/add",
            type: "post",
            data: curGoodsInfo,
          }).then(function (res) {
            console.log(res);
            layer.msg(res.msg);
          });
          return false;
        });
      });
    </script>
  </body>
  <script>
    $.fn.extend({
      _tabchange() {
        let self = this;
        this.find(".main1").mouseenter(function () {
          $(this).addClass("selected").siblings().removeClass("selected");
          let index = $(this).index();
          self
            .find(".tab-item")
            .eq(index)
            .addClass("active")
            .siblings()
            .removeClass("active");
        });
      },
    });
    $(function () {
      $("#box")._tabchange();
    });
    $.fn.extend({
      _tabchange1() {
        let self = this;
        this.find(".tab li").click(function () {
          $(this).addClass("active1").siblings().removeClass("active1");
          let index = $(this).index();
          self
            .find(".products div")
            .eq(index)
            .addClass("selected1")
            .siblings()
            .removeClass("selected1");
        });
      },
    });
    $(function () {
      $(".wrapper")._tabchange1();
    });
  </script>
  <script>
    $(function () {
      $(window).on("scroll", function () {
        let sTop = $(this).scrollTop();
        if (sTop > 100) {
          $(".toTop").show();
        } else {
          $(".toTop").hide();
        }
        if (sTop > 1000) {
          $(".fot").show();
        } else {
          $(".fot").hide();
        }
      });
      $(".toTop").on("click", function () {
        $("html,body").animate({ scrollTop: 0 });
      });
    });
  </script>
</html>
